<template>
	<view :class="['badge', zClass]">
		<slot/>
		<view v-if="dot" class="tag dot" :style="{margin}"></view>
		<view v-else-if="count" class="tag count" :style="{margin}">{{count}}</view>
	</view>
</template>

<script>
	export default{
		props:{
			'zClass':{type:String},
			'dot':{type:Boolean},
			'count':{type:null},
			'offset':{type:Array}
		},
		computed:{
			margin(){
				if(this.offset)return this.offset.map(v=>v+'px').join(' ')
				else return 0
			}
		}
	}
</script>

<style lang="scss">
	.badge{
		position: relative;
		display: inline-block;
		.tag{
			position: absolute;
			border-radius: 50%;
			background-color: $error-color;
			color: #fff;
			font-size: 20upx;
		}
		.dot{
			width: 14upx;
			height: 14upx;
			top: -6upx;
			right: -6upx;
		}
		.count{
			height: 1.6em;
			min-width: 1.6em;
			top: -0.8em;
			right: -0.8em;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 1em;
			padding: 0 10upx;
			box-sizing: border-box;
		}
	}
</style>
